<template>
  <div>
    <van-nav-bar title="缴费记录"
                 left-text=""
                 left-arrow
                 @click-left="onClickLeft" />
    <template>
      <el-table ref="multipleTable"
                :data="tableData"
                :row-style="showUnpay"
                style="width: 100%;"
                tooltip-effect="dark">
        <el-table-column prop="addr"
                         label="地址"
                         width="120">
        </el-table-column>
        <el-table-column prop="name"
                         label="项目"
                         width="105">
        </el-table-column>
        <el-table-column prop="cost"
                         label="消费金额"
                         width="95">
        </el-table-column>
        <el-table-column prop="payDate"
                         label="缴款日期"
                         width="95">
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
export default {
  name: 'PayHistroy',
  data () {
    return {
      index: 1,
      tableData: this.$store.state.tableData
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    // 只显示已支付的项目
    showUnpay ({ row, rowIndex }) {
      if (this.tableData[rowIndex].status === 'false') {
        return { display: 'none' }
      } else {
        return {}
      }
    }
  }
}
</script>
<style scoped>
/* 表头样式 */
::v-deep thead .cell {
  color: #778899;
}
.van-nav-bar {
  background-color: rgb(114, 202, 205);
}
::v-deep .van-nav-bar .van-icon,
::v-deep .van-nav-bar__text,
::v-deep .van-nav-bar .van-ellipsis {
  color: #fff;
}
</style>
